<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <link rel="stylesheet" href="../../build/aui-css/css/bootstrap.css">
    <script src="../../build/aui/aui.js"></script>
    <style>
    .example {
        margin: 100px;
    }

    #delegate {
        width: 100px;
    }
    </style>
</head>
<body>
    <h1>AlloyUI - Tooltip</h1>
    <div class="example">
        <h2>Simple</h2>
        <br/>
        <button class="btn btn-lg btn-primary" id="triggerTop" title="One fine body…">Mouseover to show a top tooltip</button>
        <button class="btn btn-lg btn-primary" id="triggerBottom" title="Another fine body…">Mouseover to show a bottom tooltip</button>
        <button class="btn btn-lg btn-primary" id="triggerHelp" title="Users are individuals who perform tasks using the portal. Administrators can create new users or deactivate existing users. Users com join sites, be placed into organization hierarchies, be delegated permissions in roles, or be collected into users groups. User groups can cross organizational boundaries, and can be used to assign all members to other collections, such as sites or roles. User groups may also be used to customize personal site templates for members.">Mouseover to show help tooltip</button>
        <button class="btn btn-lg btn-primary" id="triggerHtml" title="This tooltip <i><b>is not being escaped</b></i>.">Mouseover to show HTML unescaped tooltip</button>
        <br/>
        <br/>
        <h2>Delegate</h2>
        <br/>
        <ul id="delegate">
            <li title="Apricot" tabindex="0">Apricot</li>
            <li title="Pineapple is my favorite!" tabindex="0">Pineapple</li>
            <li title="Kiwi" tabindex="0">Kiwi</li>
            <li title="Orange" tabindex="0">Orange</li>
            <li title="Pomegranate" tabindex="0">Pomegranate</li>
            <li title="Lime" tabindex="0">Lime</li>
            <li title="Watermelon" tabindex="0">Watermelon</li>
            <li title="Apricot" tabindex="0">Apricot</li>
            <li title="Pineapple" tabindex="0">Pineapple</li>
        </ul>
    </div>
    <script>
    YUI({ filter:'raw' }).use('aui-tooltip', function(Y) {

         new Y.Tooltip({
            trigger: '#triggerTop',
            duration: 0.5, // in seconds
            delay: { // in milliseconds
                show: 0,
                hide: 1000
            }
        }).render();

        new Y.Tooltip({
            animated: false,
            position: 'bottom',
            trigger: '#triggerBottom'
        }).render();

        new Y.Tooltip({
            trigger: '#triggerHelp',
            cssClass: 'tooltip-help',
            opacity: 1,
            delay: {
                show: 0,
                hide: 1000
            }
        }).render();

        new Y.Tooltip({
            trigger: '#triggerHtml',
            html: true
        }).render();

        new Y.TooltipDelegate({
            position: 'right',
            triggerHideEvent: ['blur', 'mouseleave'],
            triggerShowEvent: ['focus', 'mouseover'],
            trigger: '#delegate li',
            visible: false
        });

    });
    </script>
</body>
</html>